<template>
  <div>
    <div class="index">

      <el-container>
        <div :style="bkStyle">
          <router-view />
        </div>
      </el-container>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Main',
  components: {},
  props: {},
  data() {
    return {
      bkStyle: {
        backgroundImage: 'url(' + require('../assets/bk.jpg') + ')',
        backgroundSize: 'cover',
        backgroundRepeat: 'no-repeat',
        backgroundPosition: 'center center',
        height: '100%',
        width: '100%',
      },
    }
  },
  created() {},
  methods: {
    pushIndex() {
      this.$router.push('/')
    },
    pushAdd() {
      this.$router.push('/blog/add')
    },
    loginout() {
      this.$store.commit('REMOVE_INFO')
      this.$router.push('/login')
    },
  },
  watch: {},
  computed: {},
  mounted() {},
}
</script>
<style >
.index {
  height: calc(100vh);
}
html,
body,
#app,
.el-container {
  /*统一设置高度为100%*/
  height: 100%;
  width: 100%;
  padding: 0;
}

.main {
  margin: 0;
  background-size: 100% 100%;
  height: 100%;
}

.front {
  height: 100%;
  width: 100%;
  overflow: auto;
}
.fornt_center {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.blogitem {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: 1%;
}
.itemCard {
  width: 70%;
}
</style>